<template>
  <div class="question-lib w80 mg0auto">
    <LibSelected class="mgt30p" @lib-changet="fnLibChange" />
    <LibList
      v-for="(item, index) in state.questions"
      :key="index"
      :msg="item"
    />
    <Pagination class="mgt20p" />
  </div>
</template>

<script>
import { reactive } from "vue";
import LibSelected from "../components/Box/QuestionLibBox/LibSelected.vue";
import LibList from "../components/Box/QuestionLibBox/LibList.vue";
import Pagination from "../components/Box/Pagination/Pagination.vue";
import { post_ } from "../http/api.js";
import message from "../components/Box/Message/Message.js";
import { localStore, localData } from "/@/http/store.js";

export default {
  // 父组件传值
  props: {
    msg: String,
  },
  // 组件
  components: {
    LibSelected,
    LibList,
    Pagination,
  },
  // 钩子
  setup(props) {
    // 双向绑定数据
    const state = reactive({
      questions: [],
    });
    // 题库变更
    const fnLibChange = (val) => {
      fnGetQuestions(val); // 查询题库
      localStore("qlib", val); // 本地存储问题库ID
    };
    // 获取问题列表
    const fnGetQuestions = (val) => {
      post_("api/pub/getQuestions", {
        id: 0,
        lib: val,
      }).then((res) => {
        message.run("列表查询成功！");
        state.questions = res;
      });
    };
    // 输出到模板
    return {
      state,
      fnLibChange,
      fnGetQuestions,
    };
  },
  // 钩子
  created() {
    // 查询题库问题列表
    this.fnGetQuestions(this.$route.params.id);
  },
};
</script>

<style scoped>
div {
  color: #fff;
}
</style>
